<script setup lang="ts">
import { RouterView, useRoute} from 'vue-router'
import { ref, watch } from 'vue'
import { useUserStore } from './stores/user'

const userStore = useUserStore()
const route = useRoute()
const cachedComponents = ref([])

const globalVal = globalThis as any;
// 登录
globalVal.login = () => {
  userStore.login()
}


// 动态管理需要缓存的组件
watch(route, (to) => {
  if (to.meta.keepAlive && !cachedComponents.value.includes(to.name as never)) {
    cachedComponents.value.push(to.name as never)
  }
}, { immediate: true })

</script>

<template>
  <RouterView v-slot="{Component, route}">
    <Transition name="fade-transform" mode="out-in">
        <keep-alive :include="cachedComponents">
          <component :is="Component" :key="route.fullPath"/>
        </keep-alive>
    </Transition>
  </RouterView>


</template>

<style scoped>

</style>
